feat(plugin-third-parties): add rspress-plugin-third-parties 🎉 - #33
feat(plugin-third-parties): add rspress-plugin-third-parties 🎉 #33sanjaiyan-dev wants to merge 7 commits into
Conversation
…mponents - Implemented GoogleMapsEmbed component for embedding Google Maps with customizable options. - Created GoogleTagManager component to facilitate Google Tag Manager integration with support for dataLayer and custom parameters. - Developed YouTubeEmbed component for embedding YouTube videos with preconnect and script loading optimizations. - Introduced ThirdPartyScriptEmbed component for rendering third-party scripts and HTML. - Added TweetEmbed component for rendering tweets with theme support. - Implemented Script component for optimized script loading strategies. - Added utility functions for handling script attributes and idle callbacks. - Created tests for all new components to ensure functionality and integration. - Updated tsconfig for TypeScript support in the third-parties package.
- Updated import statements to use single quotes consistently. - Reformatted code for better readability and consistency. - Adjusted test descriptions for clarity and consistency. - Ensured proper cleanup in tests to avoid side effects. - Updated TypeScript configuration formatting for consistency.
…e YouTubeEmbed tests
…pt loading and embeds
| - ⚡ **React 19 Resource Pre-initialization**: Leverages native `ReactDOM.preinit` and `ReactDOM.preload` during SSG/SSR. | ||
| - 🧠 **Smart Memory Caching**: Built-in script deduplication and stylesheet cache registry. | ||
| - 🛠️ **Zero-Config Global GA**: Inject Google Analytics across all documentation pages automatically via your `rspress.config.ts`. | ||
| - 📦 **Zero-Weight Embeds**: Powered by `third-party-capital` for lightweight HTML generation. |
There was a problem hiding this comment.
In this repository, we do not maintain an official website; all the demo files in the docs folder are only used for e2e testing.
So if you migrate to this repository, it means your official website will be modified to become an e2e case and will not be deployed.
If you want to keep this official website, it may be better to deploy it in your personal repository.
There was a problem hiding this comment.
In this repository, we do not maintain an official website; all the demo files in the docs folder are only used for e2e testing.
So if you migrate to this repository, it means your official website will be modified to become an e2e case and will not be deployed.
If you want to keep this official website, it may be better to deploy it in your personal repository.
Got it, sorry for the confusion! Yeah, that makes sense—I'll keep it in my personal repo. Thanks for letting me know.
Summary
This PR adds
rspress-plugin-third-partiesto the officialrspress-pluginsmonorepo underpackages/rspress-plugin-third-parties.Following up on the documentation PR (web-infra-dev/rspress#3546) and review from @SoonIter, this plugin brings optimized third-party component embeds and script loading strategies to the Rspress ecosystem.
👉 Live Interactive Playground: https://sanjaiyan-dev.github.io/rspress-plugin-third-parties
🚀 Key Features
<GoogleAnalytics />): Lightweight GA4 script injection and event tracking.<GoogleTagManager />): Optimized GTM container initialization.<YouTubeEmbed />): Fast, accessible YouTube embeds usingthird-party-capitaland React 19 resource preloading (ReactDOM.preconnect).<TweetEmbed />): Auto-detects Rspress dark/light mode themes and renders tweets viareact-tweet.<Script />): Flexible script loading strategies (beforeInteractive,afterInteractive,lazyOnload).📦 Package Details
packages/rspress-plugin-third-parties".": Components (GoogleAnalytics,GoogleTagManager,YouTubeEmbed,TweetEmbed,Script)"./plugin": Rspress Plugin Configuration (pluginThirdParties)packages/rspress-plugin-third-parties/docs(pnpm docs:dev)🧪 Testing & Verification
rstest): 25 passed across 5 test suites (GoogleAnalytics,GoogleTagManager,Script,TweetEmbed,YoutubeEmbed).pnpm build): Dual ESM/CJS build generated viarslib.### Sitecategory.